import { Button, Checkbox, Form, Input, Col, message } from 'antd'
import { useState, useContext } from 'react'
import { AppContext } from '@/store'

import { RegisterApi } from '../apis'
const RegisterForm = ({ switchHandle }) => {
  const { state, dispatch } = useContext(AppContext)
  const [messageApi, contextHolder] = message.useMessage()
  const [form] = Form.useForm()
  const [passwordError, setPasswordError] = useState(false)

  const onFinish = async (values) => {
    try {
      const result = await RegisterApi({
        username: values.username,
        password: values.password,
      })
      console.log('result:', result)
      if (result.success){
        message.success('注册成功！')
        dispatch({ type: 'SET_STATUS', payload: 1 })
      }else{
        message.error('注册失败， 请重试')
      }
     
    } catch (error) {}
  }

  const onFinishFailed = () => {}

  // 自定义验证函数，用于验证两次密码是否一致
  const validatePassport = (_, value) => {
    if (value !== form.getFieldValue('password')) {
      setPasswordError(true)
      return Promise.reject(new Error('两次密码不一致'))
    } else {
      setPasswordError(false)
      return Promise.resolve()
    }
  }
  return (
    <Col className="login-form-container">
      <Col className="login-form-title">
        <span>注册账号</span>
      </Col>
      <Form
        form={form}
        name="basic"
        // labelCol={{ span: 8 }}
        layout="vertical"
        style={{ maxWidth: 400, width: '100%' }}
        initialValues={{ remember: true }}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
        autoComplete="off"
      >
        <Form.Item
          label="用户名"
          name="username"
          rules={[
            { required: true, message: '用户名不能为空!' },
            { min: 4, message: '用户名长度至少为4位' },
          ]}
        >
          <Input placeholder="请输入4-20位字符" style={{ height: '40px' }} />
        </Form.Item>
        <Form.Item
          label="密码"
          name="password"
          rules={[
            { required: true, message: '密码不能为空!' },
            { min: 6, message: '密码长度至少为6位' },
          ]}
        >
          <Input.Password placeholder="请输入密码" style={{ height: '40px' }} />
        </Form.Item>
        <Form.Item
          label="确认密码"
          name="repassport"
          rules={[
            { required: true, message: '确认密码不能为空!' },
            { validator: validatePassport },
          ]}
          validateStatus={passwordError ? 'error' : ''}
          help={passwordError ? '两次密码不一致' : ''}
        >
          <Input.Password
            placeholder="请再次输入密码"
            style={{ height: '40px' }}
          />
        </Form.Item>

        <Form.Item>
          <Button
            type="primary"
            block
            htmlType="submit"
            style={{ height: '40px' }}
          >
            立即注册
          </Button>
        </Form.Item>
        <Form.Item>
          <Button
            type="link"
            block
            style={{ height: '40px' }}
            onClick={() => switchHandle(1)}
          >
            账号密码登录
          </Button>
        </Form.Item>
      </Form>
    </Col>
  )
}

export default RegisterForm
